<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/29 0029
  Time: 下午 12:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style>
        .title{
            display: none;
        }
        .btn{
            background: cornflowerblue;
        }
        /*最外层的div*/
        #bigDiv{
            width: 65%;
            margin: 10px auto;
        }
        /*试题框的格式*/
        #shiti{
            margin-right: 15px;
            float: left;
            width: 70%;
            border: 2px solid cornflowerblue;
            border-radius: 5px;
            display: inline-block;
        }
        /*答题卡下方答案框的显示*/
        #daan{
            position: fixed;
            float: right;
            width: 17%;
            height: 800px;
            border: 2px solid cornflowerblue;
            border-radius: 10px;
            display: inline-block;
        }
        /*答题卡头的格式*/
        #datika{
            background: cornflowerblue;
            font-size: 25px;
            float: left;
            color: white;
            border-radius:  5px 5px 0px 0px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        /*点击交卷的格式*/
        #endexam{
            color: yellow;
            font-size: 24px;
            font-weight: 600;
            background: cornflowerblue;
            width: 100%;height: 40px;
            border-radius: 50px;
            border: none;
        }
        /*成绩显示的界面*/
        .score{
            padding-left: 150px;
            text-align: left;
            font-size:30px;
            font-weigh:500px;
            width: 80%;
            margin: 0px auto;
            line-height: 100px;
        }
        a{
            text-decoration: none;
        }
        /*返回主页面的按钮*/
        .return_main{
            vertical-align: middle;
            height: 40px;
            width: 150px;
            font-weight: 800;
            background: dodgerblue;
            border: none;
            color: #fff;
        }

    </style>
</head>
<body id="body">
<div id="bigDiv">
    <div id="shiti">
        <table id="ta" width="100%">
            <tr>
                <th style="background-color: #D1EEEE"><br>
                    <b style="font-size: 40px">${map.exam.eName}</b><br><br>
                </th>
            </tr>
            <%--        遍历试卷--%>

            <c:forEach items="${map.tkArrayList}" var="arr" varStatus="s">

                <c:if test="${arr.style.styleId==1}">
                    <tr name="xuanzhe" style="background-color: #D1EEEE;margin-bottom: 0px"><td><b style="font-size: 25px">选择题</b></td></tr>
                </c:if>
                <c:if test="${arr.style.styleId==2}">
                    <tr name="panduan" style="background-color: #D1EEEE;"><td><b style="font-size: 25px">判断题</b></td></tr>
                </c:if>
                <tr>
                    <td>
                        <table width="100%" style="background-color: #D1EEEE">
                            <c:forEach items="${arr.tContent.split('#')}" var="str" varStatus="i">
                                <c:choose>
                                    <c:when test="${i.index eq 0}">
                                        <%--             显示题干内容--%>
                                        <tr id="${s.index+1}"><th align="left" style="padding-top: 10px"><button style="width: 26px;height: 26px; border-radius: 13px;background: cornflowerblue;border: none;color: white" disabled>${s.index+1}</button>
                                                ${str}</th></tr>
                                        <tr><td><hr></td></tr>
                                    </c:when>
                                    <c:otherwise>
                                        <%--            显示选项内容--%>
                                        <tr ><td style="padding-left: 40px" class="chooseRows"><input type="radio" name="choose${s.index}" value="${str.substring(0,1)}" onchange="chooses(this.name,this.value)"/>${str}</td></tr>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                            <tr><td><hr style="border: gainsboro"></td></tr>
                        </table>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <div id="daan">
        <table id="datika" width="100%">
            <tr>
                <td align="center">答　题　卡</td>
            </tr>
            <tr>
                <td align="center">
                    <div class="time-item" style="color: yellow;font-size: 12px">
                        <span id="endtime">考试倒计时：</span>
                        <strong id="hour_show">00时</strong>
                        <strong id="minute_show">00分</strong>
                        <strong id="second_show">00秒</strong>
                    </div>
                </td>
            </tr>
        </table>
        <div id="adddiv">
            <c:forEach items="${map.tkArrayList}"  varStatus="sts">
                <a href="#${sts.index+1}"><button id="choose${sts.index}" value="-1" style="width: 30px;height: 30px;margin: 10px 7px 0px 10px;border: darkgray 1px solid" >${sts.index+1}
                </button></a>
            </c:forEach>
        </div>
        <div>
            <table width="100%">
                <tr>
                    <td>
                        <input type="button" name="endexam" value="点击交卷" id="endexam" onclick="endExam()" />
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>

<script>

    var countExam="${map.exam.eString}".split(",").length;//考试试卷的总题数
    console.log(countExam)
    var answer=new Array(countExam);//定义数组，存放学生的答案选项，传递到后台
    var intDiff =60*60; //倒计时总秒数
    var count=0;//统计endExam函数的调用次数，保证他只被调用一次

    /**
     * 鼠标经过行选项变色
     **/
    $(function() {
        $(".chooseRows").mouseover(function () {
            $(this).css("background","cornflowerblue");
        });
        $(".chooseRows").mouseleave(function () {
            $(this).css("background","#D1EEEE");
        });
        $(".chooseRows").click(function () {
            $(this).children("input").attr("checked",true);
            var values=$(this).children("input").val();
            console.log(values);
            document.getElementById($(this).children("input")[0].name).classList.add('btn');
            document.getElementById($(this).children("input")[0].name).setAttribute("value",values);
        })

        timer(intDiff);
        showtitle();
    })


    /*
    * 当某题已做时，对应的下方的题号显示为选中状态（已做）
    * */
    function chooses(a,v){
        var choose1=document.getElementsByName(a);
        var choose2=document.getElementById(a);//label标签
        for(var i=0;i<choose1.length;i++){
            if(choose1[i].checked){
                choose2.setAttribute("value",v);
                choose2.classList.add('btn');//设置背景变化
            }
        }
    };

    function endExam() {
        if(intDiff!=0){
            var flag=confirm("确认交卷！")
            if(flag){
                for(var i=0;i<countExam;i++){
                    var an=document.getElementById("choose"+i).value;
                    answer[i]=an;
                };
                console.log(answer);

                $.ajax({
                    url:"StuScoreServlet",
                    type:"POST",
                    traditional:true,//这个属性默认是false,jquery会深度序列化这个对象，以适应java框架，通过设置tradtional为true阻止深度序列化
                    dataType:"JSON",
                    data:{
                        answers:answer
                    },
                    success:function (result) {
                        $("#body").html("<div style='background: #75ddf59e;width:100%;height:100%'><table class='score'><tr><td>&nbsp;</td></tr><tr><td>${map.exam.eName}</td></tr>"+
                            "<tr><td>姓名："+result.stu.sName+"&nbsp;&nbsp;&nbsp;&nbsp;你的考试分数是： <b style='color:green'>"+result.score+"</b> 分&nbsp;&nbsp;&nbsp;&nbsp;<a href='main.html'><button class='return_main'>点击返回主页</button></a></td></tr>" +
                            "</table></div");
                    }
                });
                count++;
            }
        }
    };

    function timer(intDiff) {
        window.setInterval(function() {
            if(count==0){
                var hour = 0,
                    minute = 0,
                    second = 0; //时间默认值
                if(intDiff > 0) {
                    hour = Math.floor(intDiff / (60 * 60));
                    minute = Math.floor(intDiff / 60)  - (hour * 60);
                    second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
                }
                if(hour <= 9) hour = '0' + hour;
                if(minute <= 9) minute = '0' + minute;
                if(second <= 9) second = '0' + second;
                $('#hour_show').html('<s id="h"></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                intDiff--;
                if(intDiff==5){
                    alert("距考试结束还有5分钟，请注意答题时间！")
                }
                if(intDiff==0&&count==0){//计时器为0时，触发交卷的试卷
                    alert("考试时间到，请点击交卷！")
                    for(var i=0;i<countExam;i++){
                        var an=document.getElementById("choose"+i).value;
                        answer[i]=an;
                    };
                    console.log(answer);

                    $.ajax({
                        url:"StuScoreServlet",
                        type:"POST",
                        traditional:true,//这个属性默认是false,jquery会深度序列化这个对象，以适应java框架，通过设置tradtional为true阻止深度序列化
                        data:{
                            answers:answer
                        },
                        success:function (result) {
                            $("#body").html("<div style='background: #75ddf59e;width:100%;height:100%'><table class='score'><tr><td>&nbsp;</td></tr><tr><td>${map.exam.eName}</td></tr>"+
                                "<tr><td>姓名："+result.stu.sName+"&nbsp;&nbsp;&nbsp;&nbsp;你的考试分数是： <b style='color:green'>"+result.score+"</b> 分&nbsp;&nbsp;&nbsp;&nbsp;<a href='main.html'><button class='return_main'>点击返回主页</button></a></td></tr>" +
                                "</table></div");
                        }
                    });
                }
            }
        }, 1000);
    };
    function showtitle(){
        var ch1=document.getElementsByName("xuanzhe");
        for(var i=0;i<ch1.length;i++){
            if(i!=0){
                ch1[i].classList.add('title');
            }
        }
        var ch2=document.getElementsByName("panduan");
        for(var i=0;i<ch2.length;i++){
            if(i!=0){
                ch2[i].classList.add('title');
            }
        }

    }

</script>

</body>
</html>
